<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>所有图片</title>
    <link rel="stylesheet" href="/res/layui/css/layui.css" media="all">
    <script type='text/javascript' src='../res/jquery-3.5.1.js'></script>
    <script type="text/javascript" src="Popup.js"></script>
    <script src="../res/layui/layui.js"></script>
    <script type="text/javascript" src="/res/layer/layer.js"></script>
    <!--<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">-->
    <!--&lt;!&ndash; 最新的 Bootstrap 核心 JavaScript 文件 &ndash;&gt;-->
    <!--<script src="../bootstrap/js/bootstrap.min.js"></script>-->
    <script src="../res/axios.js"></script>
    <script type="text/javascript" src="/res/vue.js"></script>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">

        </div>
    </script>
    <script>

        function getType() {
            let test = window.location.hash;
            test = decodeURI(test);
            test = test.substring(1, test.length);
            return test;
        }

        //JS
        let tableS; //表格模块
        let uploadS;//文件上传模块
        let elementS;
        layui.use(['code', 'table', 'element', 'util', 'upload'], function () {
            const element = layui.element
                , util = layui.util
                , $ = layui.$;
            tableS = layui.table;
            uploadS = layui.upload;
            elementS = layui.element;


            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作', {icon: 0});
                }
                , menuRight: function () {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });

        });
    </script>
</head>
<body onload="initTable(getType())">
<div class="layui-layout layui-layout-admin" id="main">
    <div class="layui-header layui-bg-cyan" id="head">
        <div class="layui-logo layui-hide-xs layui-bg-blue">KingDrive</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left layui-bg-cyan">
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm"
                lay-header-event="menuLeft">

            </li>


            <li class="layui-nav-item">
                <label>
                    <input type="text" >
                </label>
                <button class="layui-btn layui-btn-normal layui-btn-sm">搜索</button>
            </li>

        </ul>


        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">

                <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                     class="layui-nav-img">
                {{user.name}}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">个人中心</a></dd>
                    <dd><a href="">设置</a></dd>
                    <dd><a href="">····</a></dd>
                    <dd><a href="">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-cyan">
        <div class="layui-side-scroll ">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree " lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="index.html">全部文件</a>
                    <dl class="layui-nav-child">
                        <dd><a onclick="initTable(1)">图片</a></dd>
                        <dd><a onclick="initTable(2)">文档</a></dd>
                        <dd><a onclick="initTable(3)">视频</a></dd>
                        <dd><a onclick="initTable(6)">种子</a></dd>
                        <dd><a onclick="initTable(4)">音乐</a></dd>
                        <dd><a onclick="initTable(5)">其他</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">我的分享</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">回收站</a></li>

            </ul>
        </div>
    </div>

    <div id="bodyS" class="layui-body layui-bg-gray">
        <!-- 内容主体区域 -->


        <div style="width: 100%" id="fileTable">
            <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
        <div class="layui-footer">
            <!-- 底部固定区域 -->
            <img style="width: 20px" src="/res/svg/文件夹.svg">
            底部固定区域
        </div>
    </div>
</div>


</body>

<script type="text/javascript">

    function initTable(type) {
        console.log(type)
        if (type === undefined || type === null || type === "") {
            type = 1;
        }
        tableS.render({
            elem: '#test'
            , url: '/getAllFileType?type=' + type
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页

            }
            , cols: [[
                {field: 'name', title: '文件名', templet: '#typeImh', width: '200', sort: true}
                , {field: 'fileSize', title: '文件大小(kb)', width: '200'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'path', title: '路径', templet: '#Filepath', width: '380', sort: true}
                , {field: 'modification_time', title: '修改日期', width: '500', sort: true}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 310}
            ]]
        });

        // var filePath = null;
        //监听行工具事件
        tableS.on('tool(test)', function (obj) {
            var data = obj.data;
            console.log(obj.event)
            console.log(data)
            var path = data.path
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么 确认后直接删除不可找回 !'
                    , {icon: 7}
                    , function (index) {
                        obj.del();
                        layer.close(index);
                        axios.post('/delFile?path=' + path).then(res => {
                            if (res.data.code === 0) {
                                layer.msg(res.data.msg, {icon: 2})
                            } else {
                                layer.msg(res.data.msg, {icon: 1});
                            }

                        });
                    });
            } else if (obj.event === 'edit') {
                var oldName = path.substring(path.lastIndexOf("/") + 1, path.length);
                path = path.substring(0, path.lastIndexOf("/"))
                var fileType = oldName.substring(oldName.lastIndexOf("."))
                layer.prompt({
                    formType: 0,
                    value: '',//初始值
                    title: '请输入新的文件名'
                }, function (value, index) {
                    //alert(value); //得到value
                    let params = new URLSearchParams();
                    params.append('path', path);
                    params.append('oldName', oldName);
                    params.append('newName', value + fileType);

                    axios.post("/changeFileName", params).then(res => {
                        if (res.data.code === 0) {
                            layer.msg(res.data.msg)
                        } else {
                            layer.msg(res.data.msg, {icon: 1});
                        }
                    });
                    obj.update({
                        name: value + fileType
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'detail') {
                //查看操作
                //判断是否为图片
                let patty = new RegExp(".+(.jpeg|.jpg|.png|.bmp|.gif|.JPG)$");
                if (patty.test(data.name)) {
                    //弹窗 显示图片
                    // //页面层-图片
                    layer.open({
                        type: 1,
                        title: data.name,
                        closeBtn: 0,
                        area: ['900px', '506px'],
                        skin: 'layui-layer-nobg', //没有背景色
                        shadeClose: true,
                        content:
                            "<div class='div1'>" +
                            "<img  src='/lookPhoto?path=" + path + "' alt=''>" +
                            "<a class='layui-btn layui-btn-normal' href='/lookPhoto?path=" + path + "'>查看原图</a>" +
                            "</div>"
                    });

                } else if (new RegExp(".+(.txt|.html|.hml|.js|.cpp|.css)$").test(data.name)) {
                    var txt;
                    axios.post("/lookDoc?path=" + path).then(res => {
                        txt = res.data.data;
                        //弹窗 显示文字
                        layer.open({
                            type: 1,
                            title: data.name,
                            shade: false,
                            area: ['900px', '506px'],
                            maxmin: true,
                            content: '<pre class="layui-code" style="height: 100%">\n' +
                                txt +
                                '</pre>',
                            zIndex: layer.zIndex, //重点1
                            success: function (layero) {
                                layer.setTop(layero); //重点2
                            }
                        });

                    });
                    layui.code({
                        encode: true //是否转义html标签。默认不开启
                    });
                } else {
                    layer.msg('抱歉当前文件不支持预览', {icon: 6});
                }


            } else if (obj.event === 'goto') {
                path = path.substring(0, path.lastIndexOf("/"))
                window.location.href = "/user/index.html#" + path;
            } else if (obj.event === 'down') {
                download(path);
                console.log(obj.event)
                console.log(path)
            }
        });


    }

    function download(filePath) {
        let elemIf = document.createElement("iframe")
        elemIf.src = "/downFile?path=" + filePath;
        elemIf.style.display = "none";
        document.body.appendChild(elemIf);

    }
</script>
<script type="text/html" id="tong">

</script>
<script type="text/javascript">
    const king = new Vue({
        el: '#main',
        data: {
            user: {}, //用户信息
            path: '/', //路径信息
            filePath: ''
        },
        mounted: function () {
            axios.post('/getUser').then(res => {
                console.log(res.data.code)
                if (res.data.code === 0) {
                    gotoLogin(res.data.msg, "/index.html");
                } else {
                    this.user = res.data.obj;
                }
            });

        },
        methods: {
            download: function (filePath) {
                let elemIf = document.createElement("iframe")
                elemIf.src = "/downFile?path=" + filePath;
                elemIf.style.display = "none";
                document.body.appendChild(elemIf);

            }
        }
    });
</script>
<!--表格工具-->

<script type="text/html" id="barDemo">
    <a title="我是鼠标悬停展示的内容" class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a title="我是鼠标悬停展示的内容" class="layui-btn layui-btn-xs" lay-event="goto">前往</a>
    <button title="重命名" class="layui-btn layui-btn-xs" lay-event="edit">&nbsp;
        <i class="layui-icon layui-icon-edit"></i>&nbsp;
    </button>
    <button title="删除" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">&nbsp;
        <i class="layui-icon layui-icon-delete"></i>&nbsp;
    </button>
    <button title="下载" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="down">&nbsp;
        <i class="layui-icon layui-icon-download-circle"></i>&nbsp;
    </button>
</script>
<!--path 栏成为超链接-->
<script type="text/html" id="Filepath">
    <a href="/user/index.html#{{d.path}}" class="layui-table-link" target="_blank">{{ d.path }}</a>
</script>
<!--根据文件后缀不同显示不一样的图片-->
<script type="text/html" id="typeImh">
    {{# var fileType = d.name.substring(d.name.lastIndexOf(".") + 1) }}
    {{#if(fileType === 'txt'){ }}
    <img style='height: 20px;width: 20px' src='/res/svg/txt.svg' alt="">{{ d.name }}
    {{# }else if(fileType === 'cpp'){ }}
    <img style='height: 20px;width: 20px' src='/res/svg/cpp.svg' alt="">{{ d.name }}
    {{# }else if(fileType === 'doc'||fileType === 'docx'){ }}
    <img style='height: 20px;width: 20px' src='/res/svg/cpp.svg' alt="">{{ d.name }}
    {{# }else if(fileType === 'png'||fileType === 'jpg'||fileType === 'JPG'||fileType === 'gif'){ }}
    <img style='height: 20px;width: 20px' src='/res/svg/img.svg' alt="">{{ d.name }}
    {{#  } else { }}
    <img style='height: 20px;width: 20px' src='/res/svg/文件.svg' alt="">{{ d.name }}
    {{#  } }}
</script>

<script type="text/html" id="barDemo1">
    <a class="layui-btn layui-btn-xs" lay-event="edit">工具性按钮</a>
    {{#  if(d.sex === '女'){ }}
    <span style="color: #F581B1;">{{ d.sex }}</span>
    {{#  } else { }}
    {{ d.sex }}
    {{#  } }}
</script>
<!--图片自适应-->
<script type="text/css">
    .div1 {
        width: 500px;
        height: 400px;
        border: 1px solid black;
        display: table-cell;
        vertical-align: middle;
    }

    .div1 img {
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: auto;
    }
</script>
</html>